<!--
 * @Author: your name
 * @Date: 2022-03-05 16:17:07
 * @LastEditTime: 2022-03-07 18:53:17
 * @LastEditors: your name
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \前端练习\vue\day5\UI组件库\插槽 slot 作用域插槽.html
-->
<div id="root">
    <app>
        内容
        <template slot="navbar" slot-scope="item">头部内容{{item}}</template>
        <template v-slot:main="item">主体内容{{item}}</template>
        <template slot=tabbar>底部内容</template>
    </app>
</div>
<link rel="stylesheet" href="./qfui.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./qfui.js"></script>
<script>

Vue.component('app',{
    data(){ 
        return {
            uname:'张三',
            age:18,
        }
    },
    template:`<fieldset>
            <legend>app</legend>

            <h1>头部</h1>
            <slot name="navbar" a="1" b="2" :c="uname"></slot>

            <h1>主体</h1>
            <slot name="main" a="1" b="2" :c="uname"></slot>

            <h1>底部</h1>
            <slot name="tabbar"></slot>
            <hr/>
            <slot></slot>
        </fieldset>`,
})
const vm = new Vue({
    el: "#root",
    data: {
    }
})
</script>